<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <title></title>
</head>
<body>
    <div id="inside"></div>

    <script>
        var  touch = {
            slider: document.getElementsByName('body'),
            events: {
                slider:this.slider,
                handlerEvent: function (event) {
                    var startX = 0,startY = 0
                    var movedX = 0,movedY = 0
                    var endX   = 0,endY   = 0
                    var direction = ''

                    switch (event.type){
                        case 'touchstart':
                                startX = event.touches[0].clientX
                                startY = event.touches[0].clientY
                            break;
                        case 'touchmove':
                            break;
                        case 'touchend':
                                endX = event.changedTouches[0].clientX
                                endY = event.changedTouches[0].clientY
                            break;
                    }

                    movedX = endX - startX
                    movedY = endY - startY

                    direction = Math.abs(endX - startX) < Math.abs(endY - startY) ? 1 : 0  // 1 垂直 0 水平

                    if(direction == 1){ //垂直
                        if(movedY > 10){
                            alert("move top")
                        }
                        if(movedY < -10){
                            alert('move bottom')
                        }
                    }
                    if(direction == 0){
                        if(movedX > 10){
                            alert('move left')
                        }
                        if(movedX < -10){
                            alert('move right')
                        }
                    }

                }

            },
            init: function () {

            }
        }
    </script>
</body>
</html>